<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">定期理财</span>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="account.available"
        name="available"
        label="可用余额"
        readonly
      />
      <van-field
        v-model="account.storage"
        name="storage"
        label="储存金额"
        placeholder="输入存款金额"
        :rules="[{ required: true, message: '请输入储存金额' }]"
      />
      <van-field
        readonly
        clickable
        name="rate"
        :value="account.rate"
        label="利率选择"
        placeholder="点击选择利率"
        :rules="[{ required: true, message: '请选择利率' }]"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          value-key="text"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <div style="margin: 16px;">
        <van-button class="big-btn" block native-type="submit">
          提 交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: {
        available: 119.09,
        storage: null,
        rate: null,
        type: null
      },
      columns: [
        { type: 1, text: "存1天/0.0001" },
        { type: 2, text: "存3天/0.0005" },
        { type: 3, text: "存7天/0.0007" },
        { type: 4, text: "存15天/0.0009" }
      ],
      showPicker: false
    };
  },
  methods: {
    onSubmit(values) {
      if (values.storage > this.account.available)
        return this.$toast.fail("余额不足");
      console.log("submit", values);
    },
    onConfirm(value) {
      this.account.type = value.type;
      this.account.rate = value.text;
      this.showPicker = false;
    }
  }
};
</script>
